<template>
	<section class="hbox stretch">
		<section>
			<section class="vbox">
				<section class="scrollable hover padder-lg" id="bjax-target">
					<div class="row">
						<div class="col-md-9">
							<h3 class="font-thin">回归自性</h3>
							<div class="row row-sm">
								<div class="col-lg-2 col-xl-3 col-md-3 col-sm-3 col-xs-4" v-for="item in videos">
									<div class="item">
										<div class="pos-rlt">
											<div class="top">
												<span class="badge bg-dark m-l-sm m-t-sm">{{ item.duration }}</span>
											</div>
											<div class="bottom">
												<!-- <span class="badge bg-info m-l-sm m-b-sm">{{ item.durationTime }}</span> -->
											</div>
											<div class="item-overlay r r-2x">
												<div class="center text-center m-t-n">
													<router-link :to="'/video/'+ item.id"><i class="fa fa-play-circle fa-4x text-white"></i></router-link>
												</div>
											</div>
											<router-link :to="'/video/'+ item.id"><img :src="$api.file.url.view + item.poster" alt="" class="r r-2x img-full"></router-link>
										</div>
										<div class="padder-v">
											<span class="text-ellipsis">{{ item.title }}</span>
											<div class="text-ellipsis text-xs text-muted">{{ item.author }}</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<h3 class="font-thin">读书</h3>
							<div class="list-group bg-white list-group-lg no-bg auto">
								<router-link :to="'/book/'+ item.id" class="list-group-item clearfix" v-for="(item, index) in books">
									<span class="pull-right h2 text-muted m-l">{{ index + 1 }}</span>
									<span class="pull-left thumb-sm avatar m-r">
										<img :src="$api.file.url.view + item.poster" alt="...">
									</span>
									<span class="clear">
										<span>{{ item.title }}</span>
										<small class="text-muted clear text-ellipsis"> 浏览 {{ item.viewsCount }} 次</small>
										<small class="text-muted clear text-ellipsis"> {{ item.updateTime }} </small>
									</span>
								</router-link>
							</div>
						</div>
					</div>
					<div class="row m-t-lg m-b-lg">
						<div class="col-sm-6">
							<div class="bg-primary wrapper-md r">
								<a href="#">
									<span class="h4 m-b-xs block"><i class=" icon-user-follow i-lg"></i> 登录 | 创建账号</span>
									<span class="text-muted">登录或创建帐户后，保存播放列表并与朋友共享。</span>
								</a>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="bg-black wrapper-md r">
								<a href="#">
									<span class="h4 m-b-xs block"><i class="icon-cloud-download i-lg"></i> 下载手机APP</span>
									<span class="text-muted">让桌面和手机的应用程序随时随地净化我们的心灵、寻找本我。</span>
								</a>
							</div>
						</div>
					</div>
				</section>
				<!-- <footer class="footer bg-dark">
					<musicPlayer :palyList='palyList'></musicPlayer>
				</footer> -->
			</section>
		</section>
		<!-- side content -->
		<aside class="aside-md bg-light dk hidden" id="sidebar">
			<section class="vbox animated fadeInRight">
				<section class="w-f-md scrollable hover" id="friends">
					<h4 class="font-thin m-l-md m-t">常联系的朋友</h4>
					<ul class="list-group no-bg no-borders auto m-t-n-xxs">
						<li class="list-group-item" v-for="friend in friends">
							<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
								<img :src="friend.photo" alt="..." class="img-circle">
								<i class="on b-light right sm"></i>
							</span>
							<div class="clear">
								<div><a href="#">{{ friend.name }}</a></div>
								<small class="text-muted">{{ friend.city }}</small>
							</div>
						</li>
					</ul>
				</section>
				<footer class="footer footer-md bg-black">
					<form class="" role="search">
						<div class="form-group clearfix m-b-none">
							<div class="input-group m-t m-b">
								<span class="input-group-btn">
									<button type="submit" class="btn btn-sm bg-empty text-muted btn-icon"><i class="fa fa-search"></i></button>
								</span>
								<input type="text" class="form-control input-sm text-white bg-empty b-b b-dark no-border" placeholder="查找好友">
							</div>
						</div>
					</form>
				</footer>
			</section>
		</aside>
		<!-- / side content -->
	</section>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				keywords: '',
				total: 0, // 记录总条数
				pageSize: 12, // 每页显示条数
				pageNo: 1, // 当前的页数
				friends: [],
				videos: [],
				books: []
			}
		},
		mounted() {
			this.getFriends();
			this.getVideos();
			this.getBooks(1);
		},
		methods: {
			getFriends() {
				this.friends = [{
						name: '禅心',
						city: '北京',
						photo: 'https://cn.vuejs.org/images/logo.png'
					},
					{
						name: '闲心',
						city: '上海',
						photo: 'https://cn.vuejs.org/images/logo.png'
					}
				]
			},
			getVideos(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.video.query({
					title: this.keywords,
					publish: true,
					pageSize: this.pageSize,
					pageNo: this.pageNo
				}).then(data => {
					this.videos = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			},
			getBooks(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.book.query({
					title: this.keywords,
					// publish: 1,
					pageSize: this.pageSize,
					pageNo: this.pageNo
				}).then(data => {
					this.books = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			}
		}
	}
</script>

<style scoped>
</style>
